<template>
	<view>
		<view class="wrap">
			<view class="top"></view>
			<view class="content">
				<image
					src="https://himg.bdimg.com/sys/portrait/item/pp.1.1739748d.K7cQQKP40vQFEVD1cHNL2A?_t=1685442194733"
					mode="" style="width: 120rpx;height: 120rpx;border-radius: 50%;margin: 80rpx auto;"></image>
				<view class="title">欢迎登录</view>
				<button :style="[inputStyle]" class="getCaptcha" @click="getCode">一键登录</button>
			</view>
			<!-- <view class="buttom">
				<view class="loginType">
					<view class="wechat item">
						<view class="icon">
							<u-icon size="70" name="account" color="rgb(0, 170, 255)"></u-icon>
						</view>
						账号密码登录
					</view>
					<view class="QQ item">
						<view class="icon">

							<u-icon size="70" name="plus-square-fill" color="rgb(17,183,233)"></u-icon>
						</view>
						其他
					</view>
				</view> -->
			<view class="hint">
				登录代表同意
				<text class="link">用户协议、隐私政策，</text>
				并授权使用您的账号信息（如昵称、头像）以便您统一管理
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import loginVue from './login.vue';
	export default {
		data() {
			return {
				code: "",
				appid: "wx8435929d9b810d1b",
				wxConfig: {
					"appId": "wx8435929d9b810d1b",
					"appSecret": "fd2e72ebc8afd50a36673037aa843078",
					"server": "fixce9.natappfree.cc"
				},
				redirectUri: "fixce9.natappfree.cc%2FwebAuthLogin%2FgetCode"
			}
		},
		watch: {
			// code: () => {
			// 	this.getOpenId(this.code)
			// }
		},
		computed: {
			inputStyle() {
				let style = {};
				if (this.tel) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['warning'];
				}
				return style;
			}
		},
		onLoad(e) {
			this.getInitConfig()
			this.updateCode()
		},
		methods: {
			getInitConfig() {
				this.api.get("/wx").then(res => {
					if (res) {
						this.wxConfig = res.wxConfig;
						this.redirectUri = res.redirectUri
					}
				})
			},
			updateCode() {
				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let curRoute = routes[routes.length - 1].route //获取当前页面路由
				let curParam = routes[routes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = ''
				for (let key in curParam) {
					param += '&' + key + '=' + curParam[key]
				}
				if (curParam.code) {
					this.code = curParam.code;
					this.getOpenId(this.code)
				}
			},
			getOpenId(code) {
				if (code) {
					/**
					 * 获取openid和access_token
					 */
					this.api.get("/wx/getCode?code=" + this.code).then(res => {
						console.log(res);
					})
				}
			},
			// 获取code
			// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
			getCode() {
				if (this.isWechat()) {
					if (!this.code) {

						// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId

						let url =
							`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.wxConfig.appId}&redirect_uri=${this.redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
						window.location.href = url;
						// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
						// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。		 
					}
				} else {
					uni.showToast({
						icon: "error",
						title: "只支持微信设备"
					})
				}
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			}
		}
	}
</script>

<style>
	.wrap {
		font-size: 28rpx;

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: rgb(253, 243, 208);
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: space-between;
				margin-top: 30rpx;
			}
		}

		.buttom {
			.loginType {
				display: flex;
				padding: 100rpx 150rpx 150rpx 150rpx;
				justify-content: space-between;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: $u-content-color;
					font-size: 28rpx;
				}
			}

			.hint {
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: $u-tips-color;

				.link {
					color: $u-type-warning;
				}
			}
		}
	}
</style>